<template>
  <div class="chart">
    <canvas :id="id" class="chart-canvas" :height="height"></canvas>
  </div>
</template>
<script>
import Chart from "chart.js/auto";
import ChartDataLabels from 'chartjs-plugin-datalabels'; // 引入插件
export default {
  name: "ReportsLineChart",
  props: {
    id: {
      type: String,
      default: "line-chart",
    },
    height: {
      type: [Number, String],
      default: "170",
    },
    chart: {
      type: Object,
      required: true,
      labels: Array,
      datasets: {
        type: Array,
        label: String,
        data: Array,
      },
    },
  },
  mounted() {
    var ctx = document.getElementById(this.id).getContext("2d");

    let chartStatus = Chart.getChart(this.id);
    if (chartStatus != undefined) {
      chartStatus.destroy();
    }

    new Chart(ctx, {
      type: "line",
      data: {
        labels: this.chart.labels,
        datasets: this.chart.datasets.map(dataset => ({
        label: dataset.label,
        data: dataset.data,
        tension: 0,
        pointRadius: 5,
        pointBackgroundColor: "rgba(255, 255, 255, .8)",
        pointBorderColor: "transparent",
        borderColor: dataset.borderColor || "rgba(255, 255, 255, .8)",
        borderWidth: 4,
        backgroundColor: dataset.backgroundColor || "transparent",
        fill: false,
        maxBarThickness: 6,
    })),
  },
      options: {
        responsive: true,
        maintainAspectRatio: false,
 plugins: {
  legend: {
    display: false,
  },
  tooltip: {
    enabled: true,
    mode: 'index',
    intersect: false,
    backgroundColor: 'rgba(30,30,30,0.9)',
    titleColor: '#fff',
    bodyColor: '#fff',
    borderColor: 'rgba(60,60,60,0.7)',
    borderWidth: 1,
    cornerRadius: 6,
    displayColors: true,
    callbacks: {
      title: (tooltipItems) => {
        return tooltipItems[0].label;
      },
      label: (context) => {
        return `${context.dataset.label}: ${context.parsed.y}`;
      },
      labelColor: (context) => {
        return {
          borderColor: context.dataset.borderColor,
          backgroundColor: context.dataset.borderColor,
          borderWidth: 2,
          borderRadius: 4,
          width: 10,
          height: 10,
        };
      },
    },
    padding: 10,
    boxPadding: 6,
  },
},
        interaction: {
          intersect: false,
          mode: "index",
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
              display: true,
              drawOnChartArea: true,
              drawTicks: false,
              borderDash: [5, 5],
              color: "rgba(255, 255, 255, .2)",
            },
            ticks: {
              display: true,
              color: "#f8f9fa",
              padding: 10,
              font: {
                size: 14,
                weight: 300,
                family: "Roboto",
                style: "normal",
                lineHeight: 2,
              },
            },
          },
          x: {
            grid: {
              drawBorder: false,
              display: false,
              drawOnChartArea: false,
              drawTicks: false,
              borderDash: [5, 5],
            },
            ticks: {
              display: true,
              color: "#f8f9fa",
              padding: 10,
              font: {
                size: 14,
                weight: 300,
                family: "Roboto",
                style: "normal",
                lineHeight: 2,
              },
            },
          },
        },
      },
    });
  },
};
</script>
